<template>
<div class="footer_box">
    <div>
      <el-checkbox v-model="chooseAll"></el-checkbox>
      选中{{count}}/总共{{todos.length}}
    </div>
    <div>
      <el-button type="primary" size="mini" @click="deleteChoose">删除所有选中的项</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import {Todo} from "@/types/todo.ts"
@Options({
  components: {},
  props:{
      todos:{
          type:Array as ()=> Todo[],
          required:true
      },
      updateTodos:{
          type:Function,
          required:true
      },
      deleteChooseAll:{
          type:Function,
          require:true
      }
  }
})
export default class Test extends Vue {
    todos!:Todo[]
    updateTodos!:Function
    deleteChooseAll!:Function
    private get count():number{
        return this.todos.reduce((pre,todo,index)=>pre+(todo.isCheck?1:0),0)
    }
    private get chooseAll():boolean{
        return this.count>0&&this.count==this.todos.length
    }
    private set chooseAll(val:boolean){
        this.updateTodos(val)
    }
    public deleteChoose():void{
        this.deleteChooseAll()
    }
}
</script>

<style lang="less" scoped>
.footer_box {
  height: 36px;
  border-top: solid 1px #ddd;
  display: flex;
  box-sizing: border-box;
  padding-top: 10px;
  justify-content: space-between;
}
</style>
